<template>
  <!-- <div>付款管理</div> -->
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <!-- <el-tab-pane label="采购付款" name="1"> </el-tab-pane>
        <el-tab-pane label="物流付款" name="2"> </el-tab-pane> -->
        <el-tab-pane label="其他付款" name="3"> </el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <Purchase />
    </template>
    <template v-else-if="activeName == 2">
      <Logistics />
    </template>
    <template v-else>
      <Other :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import Purchase from "./components/purchase/index.vue";
import Logistics from "./components/logistics/index.vue";
import Other from "./components/other/index.vue";
import { getCurrency } from "@/api/index.js";
import {
  getAccountPrincipal,
  getOption,
  getChannelList,
} from "@/api/index.js";
const activeName = ref("3");
const optionsData = reactive({});
const getCurrencyList = async () => {
  const { data } = await getCurrency();
  optionsData.currency = data || [];
};
getCurrencyList();
const getAccountPrincipalList = async () => {
  const { data } = await getAccountPrincipal();
  optionsData.principalIds = data || [];
};
getAccountPrincipalList();
const optionsData1 = ref({});
const getOpt = async () => {
  const { data } = await getOption({
    enums: "payment_fund_use,account_type",
  });
  optionsData1.value = data || {};
};
getOpt();
const optionsDataAll = computed(() => {
  return {
    ...optionsData,
    ...optionsData1.value,
  };
});
const getChannel = async () => {
  const { data } = await getChannelList({
    pageNum: 1,
    pageSize: 100,
  });
  optionsData.channelList = data || [];
};
getChannel();
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
